<template>
    <div class="box">
        <div class="header" :class="{ 'backgroudColor': !isBool }">
            <span :class="{ 'TextColor': !isBool }">{{ headline }}</span>
            <span :class="{ 'TextColor': !isBool }">
                <el-icon>
                    <Calendar />
                </el-icon>
                2023年2月10日- 00:00:00发布
            </span>
            <span :class="{ 'TextColor': !isBool }">
                <el-icon>
                    <Edit />
                </el-icon>
                2.4K 字&nbsp;<el-icon>
                    <Clock />
                </el-icon>
                &nbsp;8分钟
            </span>
            <span :class="{ 'TextColor': !isBool }">
                <el-icon>
                    <Message />
                </el-icon>博客
                &nbsp;
                <el-icon>
                    <Paperclip />
                </el-icon>
                博客
                &nbsp;
                <el-icon>
                    <Paperclip />
                </el-icon>
                概览
                &nbsp;
            </span>
            <span :class="{ 'TextColor': !isBool }">
                本作品采用&nbsp;Unlicense&nbsp;licence&nbsp;进行许可
            </span>
        </div>
        <div class="centralSection" :class="{ 'backgroudColor': !isBool }">
            <div class="centralSectionContent" :class="{ 'TextColor': !isBool }">
                <h1>编写文章</h1>
                <div class="hr"></div>
                <h2>创建新文章</h2>
                <div class="hr"></div>
                <p style="font-size:16px;font-weight: 600;">推荐通过一下命令创建:</p>
                <div class="img">
                    <img src="../assets/1.png" alt="">
                </div>
                <p>如: &nbsp;<span>npx &nbsp;blog &nbsp;new &nbsp;会员制餐厅</span></p>
                <p>默认会生成一些标准的 frontmatter,生成完成后可以直接开始编写文章</p>
                <h2>为文章添加分类和标签信息</h2>
                <div class="hr"></div>
                <p>使用上文 npx命令会帮助你自动生成 title 与 date 属性</p>
                <p>frontmatter 有一下属性可以设置,必填已用加粗字体提醒:</p>
                <ul>
                    <li>title: <span>必填</span>,否则博客会抛出错误,<span>推荐将 markdown 名字设置的与 title 属性相同，否则可能会有错误!</span></li>
                    <li>date: <span>必填</span>,否则博客会拋出错误,推荐格式:YYYY-MM-DD HH:MM.SS</li>
                    <li>description:文章的简短描述,会出现在 blog 页面对文章的简介部分</li>
                    <li>index img:文章的封面,会出现在blog 页面，路径以 public 文件夹开始查找</li>
                    <li>categories:文章归档，博客根据归档动态生成菜单</li>
                    <li>tags:文章标签，按数组形式传入：[标签1,标签2]</li>
                    <li>draft:是否是草稿，如果设置为 true 那么文章不会展示于页面中</li>
                </ul>
                <p>具体可以前往 <span> srclcontent/ config.ts </span> 查看</p>
                <p>以上为本博客规定占用的关键字，其他均可按照自己的喜好填写</p>
                <h2>Q&A</h2>
                <div class="hr"></div>
                <h3>我想要设置图片居中怎么办?</h3>
                <p>可以这样写:</p>
                <div class="imgtwo">
                    <img src="../assets/2.png" alt="">
                </div>
                <h3>我可以通过相对路径引用图片吗?</h3>
                <p>可以,但是只能通过 <span>mdx</span> + <span>import</span> 语句引入</p>
                <div class="imgthree">
                    <img src="../assets/3.png" alt="">
                </div>
                <p>mdx 文档: &nbsp;<a href=""
                        style="color:#3F5EFB">https://docs.astro.build/en/guides/markdown-content/#mdx-only-features</a></p>
                <p>推荐还是将图片放在 public 下进行目录组织</p>
                <h3>图片引入后在启动开发环境下可以显示,但是生产环境不显示</h3>
                <p>可以在开发环境注意一下控制台是否有这样的警告:</p>
                <div class="img">
                    <img src="../assets/4.png" alt="">
                </div>
                <p>这个时候意味着你需要在图片路径上加上 base 前缀, &nbsp;比如本博客</p>
                <div class="img">
                    <img src="../assets/5.png" alt="">
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="BottomLeft" :class="{ 'backgroudColor': !isBool }">
                <span :class="{ 'TextColor': !isBool }" class="bottonHead">个人信息</span>
                <div class="intermediateContent">
                    <div class="img">
                        <img src="../assets/QQ图片20230425204111.jpg" alt="">
                    </div>
                    <div class="labelfather">
                        <span class="name" :class="{ 'TextColor': !isBool }">
                            Eason Chan
                        </span>
                        <div class="label" :class="{ 'TextColor': !isBool }">
                            <div class="labelcontext">
                                <p>文章</p>
                                <span>{{ article }}</span>
                            </div>
                            <div class="labelcontext">
                                <p>标签</p>
                                <span>{{ Label }}</span>
                            </div>
                            <div class="labelcontext">
                                <p>归档</p>
                                <span>{{ file }}</span>
                            </div>
                        </div>
                        <div class="picture" :class="{ 'pictureColor': !isBool }">
                            <img src="../assets/GitHub-fill.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="BottomRight" :class="{ 'backgroudColor': !isBool }">
                <div class="botton" :class="{ 'backgroudColor': !isBool }">
                    <span class="HeadLine" :class="{ 'TextColor': !isBool }">近期文章</span>
                    <div class="bottoncontent" :class="{ 'TextColor': !isBool }">
                        <span v-for="(item,i) in store.DetailContent" :key="i">{{ item }}
                            <br>
                            {{store.date[i]}}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { inject, provide, ref } from 'vue'
import { useCounterStore } from '../pinia/Pinia'
const router = useRouter()
const store = useCounterStore()
let article = ref(store.articleTheme.length)
let Label = ref(8)
let file = ref(3)
let isBool = inject('Bool')
let headline = inject('title')
</script>

<style lang="less" scoped>
.header,
.centralSection,
.BottomLeft,
.BottomRight {
    background-color: #fff;
}

.box {
    margin: 30px auto;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    width: 60vw;
    height: 205vh;

    .header {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 60vw;
        height: 20vh;
        border-radius: 1rem;
        box-shadow: 0 2px 5px #0003, 0 2px 10px #0003;

        span:nth-child(1) {
            font-size: 1.8rem;
            font-weight: 700;
            transition: all 0.3s linear;
        }

        span {
            line-height: 25px;
            transition: all 0.3s linear;
        }
    }

    .centralSection {
        width: 60vw;
        height: 155vh;
        border-radius: 1rem;
        color: #24292f;
        box-shadow: 0 2px 5px #0003, 0 2px 10px #0003;

        .centralSectionContent {
            margin: auto;
            width: 55vw;
            height: 80vh;
        }

        h1 {
            font-weight: 600;
            font-size: 30px;
            margin-top: 24px;
            margin-bottom: 16px
        }

        h2 {
            margin-top: 20px;
            margin-bottom: 16px;
            font-weight: 600;
            line-height: 1.25;
        }

        p {
            margin-bottom: 10px;
            margin-top: 10px;
            font-size: 15px;

            span {
                background-color: rgba(175, 184, 193, 0.548);
                border-radius: 5px;
            }
        }

        ul {
            display: block;
            list-style-type: disc;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            padding-inline-start: 40px;

            li {
                font-size: 15px;
                line-height: 2;
                word-wrap: break-word;

                span {
                    font-weight: 600;
                    line-height: 1.5;
                    word-wrap: break-word;
                }
            }
        }

        h3 {
            display: block;
            font-size: 1.17em;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
        }

        .img {
            width: 50vw;
            height: 50px;
            border-radius: 5px;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .imgtwo {
            width: 55vw;
            height: 120px;
            border-radius: 5px;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .imgthree {
            width: 55vw;
            height: 80px;
            border-radius: 5px;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .hr {
            border-bottom: 2px solid hsla(210, 18%, 87%, 1);
        }
    }

    .bottom {
        width: 60vw;
        height: 22vh;
        display: flex;
        justify-content: space-between;

        .BottomLeft {
            width: 29vw;
            height: 22vh;
            border-radius: 1rem;
            box-shadow: 0 2px 5px #0003, 0 2px 10px #0003;
            color: #222222;
            font-size: 18px;
            font-weight: 500;

            .labelfather {
                width: 350px;
            }

            .label {
                width: 300px;
                display: flex;
                justify-content: space-between;

                .labelcontext {
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    align-items: center;
                    transition: all 0.3s linear;

                    p {
                        font-size: 15px;
                    }

                    span {
                        font-weight: 600;
                    }
                }
            }

            .bottonHead {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 10px;
            }

            .intermediateContent {
                padding: 10px;
                display: flex;
                justify-content: space-around;
            }

            .name {
                font-size: 20px;
                font-weight: 600;
            }

            .img {
                width: 120px;
                height: 120px;
                overflow: hidden;
                border-radius: 50%;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .picture {
                width: 35px;
                height: 35px;
                border-radius: 50%;
                overflow: hidden;
                margin-top: 10px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .BottomRight {
            width: 29vw;
            height: 22vh;
            border-radius: 1rem;
            box-shadow: 0 2px 5px #0003, 0 2px 10px #0003;

            .botton {
                border-radius: 1rem;

                .HeadLine {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 18px;
                    font-weight: 500;
                    padding: 10px;
                }

                .bottoncontent {
                    display: flex;
                    flex-direction: column;
                    font-size: 15px;
                    padding: 0px 0px 0px 20px;

                    span {
                        padding: 0.2rem;
                    }
                }
            }
        }
    }

}

.backgroudColor {
    background-color: @changesubcolor;
}

.TextColor {
    color: white;
}

.pictureColor {
    background-color: white;
}
</style>